<template>
  <div class="bodys">
    <!-- 顶部导航 -->
    <van-nav-bar class="navtop" v-if="!isshow" title="商品详情" left-arrow @click-left="onClickLeft" />
    <!-- 轮播图 -->
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="item in detailslist.swiperImgs">
        <img :src="item" alt="">
      </van-swipe-item>
      <template #indicator="{ active, total }">
        <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
      </template>
    </van-swipe>
    <!-- 商品信息 -->
    <div class="goodstop">
      <p>￥ {{ detailslist.price }}</p>
      <span>{{ detailslist.name }}</span>
    </div>
    <!-- 选择信息 -->
    <div class="goodsinfo">
      <span>已选</span>
      <p>{{ detailslist.name }}</p>
    </div>
    <!-- 图片详情 -->
    <div class="detailImgs">
      <img v-for="item in detailslist.detailImgs" :src="item" alt="">
    </div>
    <!-- 底部按钮 -->
    <van-action-bar>
      <van-action-bar-icon icon="chat-o" text="客服" />
      <van-badge :content="store.state.nums">
        <van-action-bar-icon icon="cart-o" text="购物车" @click="onClickIcon" />
      </van-badge>
      <van-action-bar-icon icon="shop-o" text="店铺" />
      <van-action-bar-button type="warning" text="加入购物车" @click="addgoods(detailslist.id)" />
      <van-action-bar-button type="danger" text="立即购买" @click="topay(detailslist.id)" />
    </van-action-bar>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useStore } from 'vuex'
import { useRoute } from 'vue-router'
import { useRouter } from 'vue-router'
import { getgoodsDetail } from "../api/index.js";
const route = useRoute()
const router = useRouter()
console.log(route.query);
const detailslist = ref({})
const goodsDetails = async () => {
  const res = await getgoodsDetail(route.query)
  console.log(res.data.data.goodsData);
  detailslist.value = res.data.data.goodsData
}
goodsDetails()


//滚动条
let isshow = ref(true)

let scrollTop = () => {
  let scroll = document.documentElement.scrollTop
  console.log(scroll);
  if (scroll >= 300) {
    isshow.value = false
  } else {
    isshow.value = true
  }
}
let onMounted = window.addEventListener('scroll', scrollTop, true)
const onClickLeft = () => history.back();


const onClickIcon = () => {
  router.push({
    path: '/shop'
  })
}

// 加入购物车
const store = useStore()
const shoplist = ref({})
const addgoods = async (id) => {
  let res = await getgoodsDetail({ goodsId: id })
  shoplist.value = res.data.data.goodsData
  store.commit('addgoods', shoplist.value)
  store.commit('numsall', 1)

}


const topay = (id) => {
  router.push({
    path: '/pay', query: {
      goodsId: id
    }
  })
}
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}

.bodys {
  background-color: rgb(240, 235, 235);
  margin-bottom: 55px;
}

::v-deep .van-swipe {
  width: 100%;
  height: 350px;

  img {
    width: 100%;
    height: 100%;
  }
}

.custom-indicator {
  position: absolute;
  color: #fff;
  width: 60px;
  border-radius: 10px 0 0 10px;
  right: 0;
  bottom: 25px;
  padding: 2px 5px;
  font-size: 16px;
  background: rgba(0, 0, 0, 0.1);
  text-align: center;
}

.goodstop {
  background-color: #fff;
  padding: 10px 5px;
  margin-bottom: 5px;

  P {
    color: red;
    font-weight: 700;
  }

  span {
    font-size: 14px;
    font-weight: 400;
  }
}

.goodsinfo {
  display: flex;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  padding-bottom: 5px;
  margin-bottom: 10px;

  span {
    color: #999;
    font-size: 12px;
    width: 8%;
  }

  p {
    width: 80%;
    height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.detailImgs {
  img {
    width: 100%;
    display: block;
  }
}

.navtop {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: red;
}

.goodsbottom {
  position: fixed;
  background-color: #fff;
  bottom: 0;
  width: 100%;
  height: 50px;

  .van-button {
    margin: 0;
    float: right;
    border-radius: 0;
  }
}
</style>